</<template>
    <div class="aftersaleDetail">
        <headerNav title="服务单详情"/>
        <div class="main" v-if="detailData!=null">
            <div class="state">
                <img v-if="detailData.orderStatus=='0'" src="../../../assets/images/e5_clock@2x.png">
                <img v-if="detailData.orderStatus=='3'" src="../../../assets/images/e5_checkmark@2x.png">
                <img v-if="detailData.orderStatus=='5'||detailData.orderStatus=='4'" src="../../../assets/images/e5_info@2x.png">
                <img v-if="detailData.orderStatus=='2'||detailData.orderStatus=='1'" src="../../../assets/images/e5_box_white@2x.png">
                {{detailData.orderStatusName}}
            </div>
            <div class="showAddress">
                <img src="../../../assets/images/e5_address@2x.png">
                <div class="address_r">
                    <p class="tel">
                        <span>{{detailData.orderShippingResultDto.recvName}}</span>
                        <span>{{detailData.orderShippingResultDto.recvPhone}}</span>
                    </p>
                    <p class="ad_box">{{detailData.orderShippingResultDto.recvAddress}}</p>
                </div>
            </div>
            <div class="shop_detail">
                <div v-for="(product,i) in detailData.orderDetailResultDtoList" :key="i" class="shop_box">
                    <van-cell-group class="additional">
                        <van-card
                            :title="product.itemName"
                            :num="product.num"
                            style="background:#fff"
                            >
                            <template slot="thumb">
                                <img :src="product.itemPicUrl" />
                            </template>
                            <template slot="tags">
                                <div class="tags">
                                    <p class="price" >
                                        ￥<span>{{product.price}}</span>
                                    </p>
                                </div>    
                            </template> 
                        </van-card>
                        <slot />
                    </van-cell-group>
                </div>
            </div>
            <div style="height:10px;"></div>
            <van-cell-group>
                <van-cell title="服务单号" :value="detailData.orderNo" />
                <van-cell title="申请时间" :value="detailData.orderTime" />
                <van-cell title="服务类型" :value="detailData.orderStatusName" />
                <van-cell-group>
                    <van-field
                        v-model="detailData.userMemo"
                        rows="1"
                        autosize
                        label="备注"
                        type="textarea"
                        disabled
                    />
                </van-cell-group>
            </van-cell-group>
            <!-- 订单状态 0:待付款 1:已付款 2:已发货 3:已收货 4:退款中 5:订单关闭 -->
            <div class="aftersaleFoot" v-if="detailData.orderStatus!=3&&detailData.orderStatus!=4&&detailData.orderStatus!=5">
                <span class="red" v-if="detailData.orderStatus=='0'" @click="pay()">去支付</span>
                <span v-if="detailData.orderStatus=='0'" @click="cancelOrder()">取消</span>
                <span v-if="detailData.orderStatus=='2'" @click="delivery()">确认收货</span> 
                <span v-if="detailData.orderStatus=='1'||detailData.orderStatus=='0'" @click="changeinfo()">修改信息</span>
            </div>
        </div>
    </div>
</template>

<script>
import { findOrderByNo,cancelOrder,confirmRecv } from "../../../api/page.js";
import { Dialog } from 'vant';
export default {
    data(){
        return {
            active:0,
            detailData:null
        }
    },
    components: {
        [Dialog.name]:Dialog,
    },
    created:function(){
        findOrderByNo({
            orderNo:this.$route.query.orderNo
        }).then(res => {
            if(res.retCode=="200"){
                this.detailData = res.data
            }
        });
    },
    methods:{
        pay(){
            this.$router.push({name:"payment",query:{orderNo:this.detailData.orderNo}});
        },
        // 取消订单
        cancelOrder(){
            Dialog.confirm({
                message: '确认取消订单？'
            }).then(() => {
                cancelOrder({
                    orderNo:this.$route.query.orderNo
                }).then(res => {
                    if(res.retCode=="200"){
                        this.$toast('订单已取消~');
                        this.$store.dispatch("setCityName", "5");
                        this.$router.push({name:"userOrder"});
                    }
                });
            }) 
        },
        // 确认收货
        delivery(){
            Dialog.confirm({
                message: '确认收货？'
            }).then(() => {
                confirmRecv({
                    orderNo:this.$route.query.orderNo
                }).then(res => {
                    if(res.retCode=="200"){
                        this.$toast('收货完成~');
                        this.$store.dispatch("setCityName", "3");
                        this.$router.push({name:"userOrder"});
                    }
                });
            }) 
        },
        // 修改信息
        changeinfo(){
            let address = {
                province : this.detailData.orderShippingResultDto.recvProvince,
                city : this.detailData.orderShippingResultDto.recvCity,
                county : this.detailData.orderShippingResultDto.recvDistrict,
                addressDetail : this.detailData.orderShippingResultDto.recvAddress,
                name : this.detailData.orderShippingResultDto.recvName,
                tel : this.detailData.orderShippingResultDto.recvPhone,
                areaCode : this.detailData.orderShippingResultDto.districtCode,
                msg:this.detailData.userMemo,
            }
            localStorage.setItem("address",JSON.stringify(address));
            this.$router.push({name:"addressEdit",query:{id:3,type:"amend",orderNo:this.detailData.orderNo}});
        }
    }
}
</script>

<style lang="less" scoped>
.aftersaleDetail{
    height: 100%;
    background: #F0F2F5;
}
.main{
    padding: .46rem 0 .55rem 0;
    .state{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: .7rem;
        line-height: .7rem;
        padding-left: .15rem;
        background-image: linear-gradient(0deg, #f35d5b 0%, #FF5D5A 100%);
        font-size: .16rem;
        color: #fff;
        img{
           width: .2rem;
           height: .2rem; 
           margin-right: .1rem;
        }
    }
    .showAddress{
        font-size: .14rem;
        padding: .2rem .15rem;
        display: flex;
        justify-content: flex-start;
        background: #fff;
        img{
            width: .16rem;
            height: .16rem;
            margin-right: .1rem;
        }
        .tel{
            color: #4e545d;
            span{
                margin-right: .1rem;
            }
        }
        .ad_box{
            font-size: .14rem;
            color: #7c7f88;
            padding-top: .1rem;
        }
    }
    .price {
        color: #e93b3d;
        font-size: 10px;
            overflow: hidden;
            height: 18px;
        span {
            font-size: 16px;
                margin-right: 5px;
        }
        .van-tag{
            font-size: 12px;
        }
    }
    .tags{
        margin-top: .1rem;
    }
    .shop_detail{
        margin-top: .1rem;
        padding: .1rem 0;
        background: #fff;
    }
    .van-cell{
        color: #7c7f88;

    }
}
.aftersaleFoot{
    position: fixed;
    bottom: 0;
    height: .55rem;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    span{
        display: block;
        height: .3rem;
        padding: 0 8px;
        min-width: .6rem;
        font-size: .12rem;
        line-height: .3rem;
        color: #333;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        margin-right: .15rem;
        text-align: center;
    }
    .red{
        border-color: #e10f02;
        color: #e10f02;
    }
}

</style>
